<template>
  <view class="size">
    <view class="title">
      <text>请选择您需要的模板</text>
    </view>
    <view class="template">
      <view class="item"
            :key="index"
            @click="handleClick(item)"
            v-for="(item,index) in items">
        <image :src="filePath" class="image" model="aspectFit"/>
        <view class="mask"></view>
        <text class="item-title">{{ item.title }}</text>
        <text class="item-spec">{{ item.spec }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import {getPhotoGetDivisionIDPhotosURL, getPhotoSpecs, getToken} from '@/api/photo'
import {ref, onMounted} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import {BASE_URL} from '@/api/request'

const filePath = ref('')
const color = ref('')
const items = ref([])

onLoad(async (option) => {
  filePath.value = option.data
  color.value = option.color
  const res = await getPhotoSpecs()
  const arr = JSON.parse(res.data)?.slice(1)
  arr?.length % 2 !== 0 ? arr.push({}) : arr
  items.value = arr
  console.log(items.value)
  console.log('接收到的文件临时地址', option)
})

const handleClick = (item) => {
  uni.uploadFile({
    url: BASE_URL + getPhotoGetDivisionIDPhotosURL,
    filePath: filePath.value,
    name: 'input_image',
    header: {
      Authorization: getToken()
    },
    formData: {
      type: 'png',
      spec: item?.id || '2',
      bk: color.value,
      beauty_degree: '1.5'
    },
    success: (res) => {
      const r = JSON.parse(res.data)
      console.log('上传成功', r.data)
    },
    fail: (res) => {
      console.log('上传失败', res)
    }
  })
}
</script>

<style scoped lang="scss">
.size {
  width: 100%;
  height: calc(100vh);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 15rpx;
  background: rgba(29, 40, 58);
  overflow: hidden;

  .title {
    //border: 1px solid red;
    width: 100%;
    height: 150rpx;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    color: white;
    font-size: 35rpx;
  }

  .template {
    //border: 1px solid red;
    width: 100%;
    display: flex;
    height: calc(100% - 150rpx);
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 10rpx;
    overflow-x: hidden;
    overflow-y: scroll;

    .item {
      //border: 1px solid red;
      width: 320rpx;
      height: 400rpx;
      margin: 10rpx;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      padding-left: 25rpx;
      position: relative;
      border-radius: 25rpx;
      box-shadow: 0 52px 110px rgba(0, 0, 0, 0.44),
      0 18px 34px rgba(0, 0, 0, 0.28);
      z-index: 1;

      .image {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
        object-position: center;
      }

      .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.47); /* 黑色半透明蒙版，可调透明度 */
      }

      text {
        z-index: 99999;
        //border: 1px solid red;
        width: 100%;
        margin: 5rpx 0;
        display: flex;
        padding: 10rpx;
        color: white;
        font-size: 28rpx;
      }

      .item-spec {
        z-index: 99999;
        font-size: 20rpx;
      }
    }
  }
}
</style>